<template>
  <div class="box">
    <div class="querybox">
      <!-- <el-input v-model="query" placeholder="请输入查询内容" style="width: 200px; right: 10px;" /> -->
      <el-button
        type="primary"
        @click="add"
      >新增</el-button>
    </div>

    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        prop="title"
        label="标题"
      />
      <el-table-column
        prop="articleauthor"
        label="作者"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.articleauthor ? scope.row.articleauthor : '无' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.status === '1' ? '发布' : '待发布' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <div>{{ timeTranslateHMS(scope.row.created) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="viewUser(scope.row)"
          >查看</el-button>
          <!-- <el-button type="text" size="small" @click="updUser(scope.row, scope.index)">修改</el-button> -->
          <Del-tip
            type="text"
            size="small"
          >
            <el-button type="primary" size="mini" @click="delUser(scope.row.id)">确定</el-button>
          </Del-tip>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 10px;">
      <el-pagination
        :total="total"
        :current-page="filters.pageNum"
        :page-size="filters.pageSize"
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleSizeChange"
      />
    </el-row>

    <el-dialog
      title="编辑"
      :visible.sync="dialogFormVisible"
      :before-close="beforeClose"
      destroy-on-close
    >
      <!-- <el-form ref="form" :model="form" :rules="rules">
        <el-card class="box-card" shadow="hover">
          <el-form-item label="标题" prop="name" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
        </el-card>
      </el-form> -->
      <span style="font-weight: bold;">标题：</span>
      <el-input
        v-model="form.title"
        style="display: inline-block; width: 200px; margin-bottom: 20px;"
      />
      <RichText
        v-model="form.content"
        :clear-content="!dialogFormVisible"
      />
      <!-- <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名" prop="username" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电话" prop="mobile" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off" />
        </el-form-item>
      </el-form> -->
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button
          type="primary"
          @click="closeDialogForm('form')"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { articles, edit_article, save_article, delete_article } from '@/api/article'
import { timeTranslateHMS } from '@/utils/formatdate'
import RichText from '@/components/Tinymce'
export default {
  name: 'Article',
  components: {
    RichText
  },
  data() {
    return {
      timeTranslateHMS,
      filters: {
        mobile: '',
        username: '',
        pageNum: 1,
        pageSize: 10
      },
      form: {
        title: '',
        content: '',
        id: ''
      },
      total: 0,
      rules: {
        mobile: [
          { required: true, message: '请输入电话号码', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      },
      tableData: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      query: ''
    }
  },
  mounted() {
    this.articles()
  },
  methods: {
    // dialog关闭事件
    beforeClose() {
      this.resetForm('form')
    },
    save_article(data) {
      save_article(data).then((res) => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        // this.dialogFormVisible = false
        this.resetForm()
      })
    },
    add() {
      this.dialogFormVisible = true
    },
    handleSizeChange(pageNum) {
      // 描述：查询结果区域，监听分页
      this.filters.pageNum = pageNum
      this.articles()
    },
    // 用户列表
    articles() {
      const pageNum = this.filters.pageNum - 1
      // this.filters.pageNum = pageNum || 1
      articles({ ...this.filters, pageNum }).then(res => {
        const result = res.data
        this.tableData = result.content
        this.total = result.totalElements
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除用户
    delUser(articleId) {
      delete_article({ articleId }).then((res) => {
        this.$message({
          message: '删除成功！',
          type: 'success'
        })
        this.articles()
      })
    },
    // 修改用户
    updUser(row, index) {
      this.dialogFormVisible = true
    },
    viewUser(data) {
      this.dialogFormVisible = true
      // this.edit_article(id)
      const { title, content, id } = data
      this.form.title = title
      this.form.content = content
      this.form.id = id
    },
    // 用户列表
    edit_article(data) {
      edit_article(data).then(res => {
        // let result = res.data;
        // this.tableData = result.users;
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
        this.articles()
        this.resetForm()
      }).catch(err => {
        console.log(err)
      })
    },
    // 弹窗关闭触发函数
    closeDialogForm(formName) {
      const data = this.form
      this.edit_article(data)

      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     this.dialogFormVisible = false
      //     this.$message({
      //       message: '修改成功！',
      //       type: 'success'
      //     })
      //   } else {
      //     return false
      //   }
      // })
    },
    resetForm() {
      this.form = {}
      this.dialogFormVisible = false
      // this.form.content = '';
    },
    handleQuery(query) {
      this.tableData = [
        {
          date: '2016-05-02',
          name: '王小虎',
          mobile: '18513101690',
          province: '普陀区',
          contact_number: '上海市普陀区金沙江路 1518 弄',
          created: 200333,
          reportCount: 1,
          status: true
        }
      ]
    },
    statusChange(row) {
      // {id: row.id, status: row.status}
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin: 20px 30px;
  .form {
    margin-top: 50px;
  }
  .querybox {
    text-align: right;
    margin-bottom: 20px;
  }
}
.box-card {
  margin-bottom: 15px;
}
</style>
